.dialog{
  .main{
    padding-bottom: px(66);
    margin: auto;
    max-width: $max-width;
    background: #f5f5f5;
    border-radius: px(4) px(4) 0 0;
  }
  .b1{
    position: sticky;
    top: 0;
    height: px(52);
    line-height: px(52);
    background: #FFFFFF;
    text-align: center;
    box-shadow: 0 px(1) px(1) rgba(0, 0, 0, 0.06);
    border-radius: px(4) px(4) 0 0;
    z-index: 3;
  }
}

.chat-list{
  padding: .1rem .1rem .2rem;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar{
    display: none;
  }
  .item{
    -webkit-animation: fade-in .3s ease both;
    .tips{
      margin: .2rem 0;
      text-align: center;
      font-size: .12rem;
      color: #a5a5a5;
    }
    .red-bag-tips{
      display: flex;
      align-items: center;
      justify-content: center;
      margin: .1rem 0;
      text-align: center;
      font-size: .12rem;
      color: #a5a5a5;
      .icon{
        margin-right: .1rem;
        width: .15rem;
        height: .18rem;
        background: url("assets/icon-02.png") center no-repeat;
        background-size: 100% 100%;
      }
      .c1{
        color: #fb973d;
      }
    }
    .chat{
      margin: .15rem 0;
      display: flex;
      .name{
        margin: -.05rem 0 .03rem;
        padding: 0 .05rem;
        font-size: .12rem;
        color: #a5a5a5;
      }
      .img-box{
        margin-right: .1rem;
        width: .4rem;
        height: .4rem;
        border-radius: .04rem;
        overflow: hidden;
        background: #ccc;
        img{
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      ::v-deep {
        .text{
          display: inline-block;
          min-width: .35rem;
          max-width: 2.7rem;
          position: relative;
          padding: .08rem .1rem;
          background: #fff;
          border-radius: .04rem;
          font-size: .15rem;
          line-height: .24rem;
          box-sizing: border-box;
          word-break: break-all;
          white-space: pre-line;
          &:before{
            content: "";
            position: absolute;
            top: .15rem;
            left: -.035rem;
            width: .07rem;
            height: .07rem;
            background: #fff;
            transform: rotate(45deg);
          }
          img{
            display: inline-block;
            height: .15rem;
            vertical-align: middle;
          }
        }
        .img{
          width: auto;
          height: auto;
          max-width: px(160);
          max-height: px(160);
        }
        .file{
          background: #fff;
        }
        .card{
          background: #fff;
        }
        .link{
          background: #fff;
        }
        .mini-program{
          background: #fff;
        }
      }
      &.self{
        justify-content: flex-end;
        &>div:first-child{
          order: 1;
        }
        .img-box{
          margin-right: 0;
          margin-left: .1rem;
        }
        .name{
          display: none;
        }
        ::v-deep .text{
          background: #3784F8;
          color: #fff;
          &:before{
            left: auto;
            right: -5px;
            right: -.05rem;
            width: 0;
            height: 0;
            border-top: solid .05rem transparent;
            border-left: solid .05rem #3784F8;
            border-bottom: solid .05rem transparent;
            transform:none;
            background: none;
          }
        }
      }
    }
    &:last-child{
      .chat{
        margin-bottom: 0;
      }
    }
  }
}
